<template>
  <div class="app-container" :style="conheight">
    <div style="width: 100%">
      <div class="flexDiv">
        <div class="card-title">{{ name }}</div>
        <div>
          <el-button
            type="text"
            icon="el-icon-close"
            @click="goback"
            style="color: black"
          ></el-button>
        </div>
      </div>

      <el-form :model="queryParams" ref="queryForm" :inline="true">
        <el-form-item label="时间选择:">
          <el-date-picker
            v-model="dateRange"
            type="datetimerange"
            size="small"
            style="width: 350px"
            range-separator="-"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            align="right"
            @change="search"
            @blur="search"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <!-- <el-button type="primary">查询</el-button> -->
          <!-- <el-button-group>
            <el-button @click="reset">重置</el-button>
            <el-button type="primary" @click="search">查询</el-button>
          </el-button-group> -->

          <el-button
            type="primary"
            @click="search"
            icon="el-icon-search"
            size="mini"
            >搜索</el-button
          >
          <el-button @click="reset" icon="el-icon-refresh" size="mini"
            >重置</el-button
          >
        </el-form-item>
        <el-form-item>
          <div class="right-title">
            仅展示当前一周之内的数据图像，超出时间范围将以列表形式呈现
          </div>
        </el-form-item>
      </el-form>
      <div class="card-content" style="display: flex" v-show="!showAll">
        <div class="card-left">
          <div class="title">
            <div class="title-name">时间排序:</div>
            <div class="title-refresh" @click="handleExport">
              <i class="el-icon-download" style="margin-right: 8px"></i>导出
            </div>
          </div>
          <el-table
            :data="detailData"
            style="width: 100%"
            class="tableBox"
            :max-height="conheight2.height"
            id="tableBox"
            @row-click="handleClickChange"
            :row-class-name="tableRowClassName"
          >
            <el-table-column
              label="序号"
              prop="index"
              width="55"
              align="center"
            >
              <template slot-scope="scope">
                <span>{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="deviceTime"
              label="具体时间"
              width="200"
              align="center"
            >
            </el-table-column>
            <el-table-column prop="doserate" label="环境剂量率" align="center">
              <template slot-scope="scope">
                <div
                  v-if="
                    scope.row.doserate > levelOne &&
                    scope.row.doserate < levelTwo
                      ? true
                      : false
                  "
                  style="color: #e19b16"
                >
                  {{ scope.row.doserate }} nSv/h
                </div>
                <div
                  v-else-if="scope.row.doserate > levelTwo ? true : false"
                  style="color: #e84b3f"
                >
                  {{ scope.row.doserate }} nSv/h
                </div>
                <div v-else>{{ scope.row.doserate }} nSv/h</div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="card-right">
          <div class="title-name">趋势图:</div>
          <div
            id="chart"
            style="width: 620px; height: 320px; margin: -10px 20px 20px 40px"
            class=""
            ref="chart"
            v-show="!showAll"
          ></div>
          <div class="data-analyse">
            <div class="analyse-title">数据分析：</div>
            <div class="analyse-itemlist">
              <div class="analyse-item">
                <a>获取量：{{ dataNumber }}个</a>
              </div>
              <div class="analyse-item">
                <a>最大值：{{ dataMax }}nSv/h</a>
              </div>
              <div class="analyse-item">
                <a>平均值：{{ dataAvg }}nSv/h</a>
              </div>
              <div class="analyse-item">
                <a>达到最大值的时刻:</a>
              </div>
              <div class="analyse-item">
                <a>最小值：{{ dataMin }}nSv/h</a>
              </div>
              <div class="analyse-item">
                <a>{{ dateMax }}</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="card-content1" v-show="showAll">
        <div class="title">
          <div class="title-name">报表详情:</div>
        </div>
        <div style="display: flex">
          <div class="card-table">
            <el-table
              :data="detailData2"
              style="width: 98%"
              class="tableBox"
              stripe
              :max-height="conheight2.height"
            >
              <el-table-column label="序号" prop="index" width="55">
                <template slot-scope="scope">
                  <span>{{ scope.$index + 1 }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="deviceTime"
                label="具体时间"
                width="200"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="stationName"
                label="站点名称"
                align="center"
              >
              </el-table-column>
              <el-table-column prop="sysName" label="设备名称" align="center">
              </el-table-column>
              <el-table-column
                prop="doserate"
                label="环境剂量率"
                align="center"
              >
                <template slot-scope="scope">
                  <div
                    v-if="
                      scope.row.doserate > levelOne &&
                      scope.row.doserate < levelTwo
                        ? true
                        : false
                    "
                    style="color: #e19b16"
                  >
                    {{ scope.row.doserate }} nSv/h
                  </div>
                  <div
                    v-else-if="scope.row.doserate > levelTwo ? true : false"
                    style="color: #e84b3f"
                  >
                    {{ scope.row.doserate }} nSv/h
                  </div>
                  <div v-else>{{ scope.row.doserate }} nSv/h</div>
                </template>
              </el-table-column>
              <el-table-column label="检测状态" prop="status" align="center">
                <template>
                  <div style="display: flex; justify-content: center">
                    <div
                      :class="
                        status === '正常'
                          ? 'zc'
                          : status === '一级报警'
                          ? 'yjbj'
                          : status === '二级报警'
                          ? 'ejbj'
                          : 'lx'
                      "
                    ></div>
                    <div>{{ status }}</div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <!-- <pagination
                v-show="total > 0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getDataList"
              /> -->
            <div style="display: flex; justify-content: space-around">
              <div style="width: 370px; height: 50px">
                <pagination
                  v-show="total > 0"
                  :total="total"
                  :page.sync="queryParams.pageNum"
                  :limit.sync="queryParams.pageSize"
                  @pagination="getDataList"
                  layout="total, prev, pager, next"
                  pager-count="3"
                  hide-on-single-page
                  style="margin: 0px"
                />
              </div>
              <el-button
                type="primary"
                @click="handleExport"
                style="margin: auto; margin-left: 400px"
                >导出</el-button
              >
            </div>
          </div>
          <div class="card-left">
            <div class="left-detail">
              <a style="font-weight: bold; margin-left: 10px">数据分析：</a>
              <div style="margin-left: 20px">
                <p>最小值：{{ dataMin }}nSv/h</p>
                <p>最大值：{{ dataMax }}nSv/h</p>
                <p>顶峰时刻：{{ dateMax }}</p>
                <p style="min-width: 240px">平均值：{{ dataAvg }}nSv/h</p>
                <p>呈现量：{{ dataNumber }}</p>
              </div>
              <div
                style="
                  height: 1px;
                  width: 260px;
                  background-color: #cacaca;
                  margin-left: -10px;
                "
              ></div>
              <div style="height: 30px; width: 240px">
                <img
                  alt=""
                  src="../../../../assets/images/perimeter/bz.png"
                  style="height: 24px; width: 24px; margin: 10px 10px 0px 190px"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  gmHistoryDataList,
  gmHistoryDataListPage,
  gmHistoryDataInfo,
  gmExport,
} from "@/api/emergency/perimeterData";
export default {
  name: "detail",
  props: ["id", "name", "sys", "level1", "level2", "status"],
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "最近4小时",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 4);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近12小时",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 12);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近1天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近7天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      queryParams: {
        dateRange: "",
      }, // 查询表单
      showAll: false,
      // 日期范围
      dateRange: [],
      detailData: [],
      detailData2: [],
      tableData: [],
      chartData: [],
      chartData2: [],
      // 其他信息
      dataAvg: "",
      dateMax: "", // 分之十克
      dataMax: "", // 平均值
      dataMin: "", // 最小值
      dataNumber: "", //
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // status: "",
      // name: "",
      levelOne: "",
      levelTwo: "",
      myChart: null,
      temprow: null,
      conheight: {
        height: "",
      },
      conheight2: {
        height: "",
      },
    };
  },
  mounted() {
    // 获取详情页的列表数据
    this.init();
    this.getAllList();
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
  },
  methods: {
    getHeight() {
      this.conheight.height = window.innerHeight - 172 + "px";
      this.conheight2.height = window.innerHeight - 452 + "px";
    },
    init() {
      // this.status = this.$route.query.status;
      // this.name = this.$route.query.name + this.$route.query.sys;
      this.name = this.name + this.sys;
      // 一级阈值and二级阈值
      this.levelOne = this.level1;
      this.levelTwo = this.level2;
      // console.log("level1:", this.levelOne, "level2:", this.levelTwo);
      const end1 = new Date();
      const start1 = new Date();
      start1.setTime(start1.getTime() - 3600 * 1000 * 4);
      this.dateRange = [start1, end1];
    },
    getAllList() {
      // 时间范围大于一天，显示表格形式
      var begin = new Date(this.dateRange[0]).getTime();
      var end = new Date(this.dateRange[1]).getTime();
      var diff = Math.floor((end - begin) / 86400 / 1000);
      if (diff > 7) {
        this.showAll = true;
        // 获取分页的数据
        this.getDataList();
      } else {
        this.showAll = false;
        // 获取不分页数据
        this.getNoDataList();
      }
      this.getOtherInfo();
    },
    // 获取不分页的数据
    getNoDataList() {
      // const params = {
      //   sysId: this.id,
      //   beginTime: this.parseTime(this.dateRange[0]),
      //   endTime: this.parseTime(this.dateRange[1]),
      // };
      var str =
        "/static/emergency/perimeterData/gmHistoryDataList" + this.id + ".json";
      this.$axios.get(str).then((res) => {
        // gmHistoryDataList(params).then((res) => {
        console.log(res, "获取不分页数据");
        if (res.data.code == 200 && res.data.data != null) {
          this.detailData = res.data.data;
          // 拼接图标数组-先置空再push
          this.chartData = [];
          this.chartData2 = [];
          res.data.data.forEach((item, index, array) => {
            this.chartData.push(item.deviceTime);
            this.chartData2.push(item.doserate);
          });
          console.log(this.chartData, this.chartData2, "====chartdata======");
          this.drawChart();
        } else {
          this.detailData = [];
          this.chartData = [];
          this.chartData2 = [];
          console.log(this.chartData, this.chartData2, "====chartdata======");
          this.drawChart();
        }
      });
    },
    getDataList() {
      const params = {
        sysId: this.id,
        beginTime: this.parseTime(this.dateRange[0]),
        endTime: this.parseTime(this.dateRange[1]),
        ...this.queryParams,
      };
      gmHistoryDataListPage(params).then((res) => {
        if (res.code == 200) {
          this.detailData2 = res.rows;
          this.total = res.total;
        }
      });
    },
    getOtherInfo() {
      // const params = {
      //   sysId: this.id,
      //   beginTime: this.parseTime(this.dateRange[0]),
      //   endTime: this.parseTime(this.dateRange[1]),
      // };
      this.$axios
        .get("/static/emergency/perimeterData/gmHistoryDataInfo.json")
        .then((res) => {
          // gmHistoryDataInfo(params).then((res) => {
          if (res.data.code == 200) {
            console.log(res, "获取其他数据");
            this.dataAvg = res.data.dataAvg;
            this.dateMax = this.parseTime(
              new Date(res.data.dateMax),
              "{y}-{m}-{d} {h}:{i}:{s}"
            ); //
            this.dataMax = res.data.dataMax;
            this.dataMin = res.data.dataMin;
            this.dataNumber = res.data.dataNumber;
          }
        });
    },
    drawChart() {
      console.log("drawchart", this.chartData, this.chartData2);
      var that = this;
      var chartDom = document.getElementById("chart");
      var myChart = this.$echarts.init(chartDom);
      this.myChart = myChart;
      const levelOne = parseInt(this.levelOne);
      const levelTwo = parseInt(this.levelTwo);

      // var data = [
      //   ["2000-06-05 00:00:00", 116],
      //   ["2000-06-06 00:00:00", 129],
      //   ["2000-06-07 00:00:00", 135],
      //   ["2000-06-08 00:00:00", 86],
      // ];
      // var ooo = data.map(function (item) {
      //   return item[0];
      // });
      // console.log(ooo, "++++++");
      var option = {
        title: {
          text: "",
          left: "1%",
        },
        tooltip: {
          trigger: "axis",
        },
        // lineStyle: {
        //   color: "#1890ff",
        // },
        grid: {
          left: "5%",
          right: "15%",
          bottom: "10%",
        },
        xAxis: {
          // data: data.map(function (item) {
          //   return item[0];
          // }),
          data: that.chartData.reverse(),
        },
        yAxis: {},
        // toolbox: {
        //   right: 10,
        //   feature: {
        //     dataZoom: {
        //       yAxisIndex: "none",
        //     },
        //     restore: {},
        //     saveAsImage: {},
        //   },
        // },
        dataZoom: [
          {
            // startValue: "2014-06-01 00:00:00",
          },
          {
            type: "inside",
          },
        ],
        visualMap: {
          top: 50,
          right: 10,
          pieces: [
            {
              gt: 0,
              lte: levelOne,
              color: "#096dd9",
            },
            {
              gt: levelOne,
              lte: levelTwo,
              color: "#e19b16",
            },
            {
              gt: levelTwo,
              // lte: parseInt(levelTwo) + 30,
              color: "#e84b3f",
            },
          ],
          outOfRange: {
            color: "#e84b3f",
          },
        },
        series: {
          name: "环境剂量率",
          type: "line",
          // data: data.map(function (item) {
          //   return item[1];
          // }),
          data: that.chartData2,
          // markLine: {
          //   silent: true,
          //   lineStyle: {
          //     color: "#333",
          //   },
          //   data: [
          //     {
          //       yAxis: 50,
          //     },
          //     {
          //       yAxis: 100,
          //     },
          //     {
          //       yAxis: 150,
          //     },
          //     {
          //       yAxis: 200,
          //     },
          //     {
          //       yAxis: 300,
          //     },
          //   ],
          // },
          markLine: {
            symbol: ["none", "none"], //去掉箭头
            itemStyle: {
              normal: {
                lineStyle: {
                  type: "solid",
                  color: {
                    // 设置渐变
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: "red ", // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "#fff", // 100% 处的颜色
                      },
                    ],
                    // color: "#e84b3f",
                    global: false, // 缺省为 false
                  },
                },
                label: {
                  show: true,
                  position: "middle",
                },
              },
            },
            data: [
              {
                yAxis: this.levelOne, //这里设置false是隐藏不了的，可以设置为-1
              },
              {
                yAxis: this.levelTwo, //这里设置false是隐藏不了的，可以设置为-1
              },
            ],
          },
        },
      };
      option && myChart.setOption(option);
      // 图形和表格联动
      //  移入该区域时，高亮
      var self = this;
      this.myChart.on("click", function (params) {
        console.log(params, params.dataIndex); //此处写点击事件内容
        var tableDom = document.getElementById("tableBox");
        self.temprow = params.dataIndex;
        console.log(self.temprow, " self.temprow");
        // console.log(tableDom, "tableDom");
        // for (var i = 0; i < self.detailData.length; i++) {
        //   if (i == params.dataIndex) {
        //     self.detailData[i].active = true;
        //   } else {
        //     self.detailData[i].active = false;
        //   }
        // }

        // for (var i = 0; i < addressList.length; i++) {
        //   if (params.name == addressList[i].name) {
        //     console.log(params.name);
        //     //addressList[i].value="1";
        //     //选中高亮
        //     this.myChart.dispatchAction({
        //       type: "highlight",
        //       name: params.name,
        //     });
        //     $(".map-table tbody tr").eq(i).addClass("highTr");
        //   }
        // }
      });
    },
    // 更新chart
    changeChart() {
      if (!this.showAll) {
        this.$nextTick(() => {
          this.drawChart();
        });
      }
    },
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm("是否确认导出所有数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.exportLoading = true;
          return gmExport({
            sysId: this.id,
            beginTime: this.parseTime(this.dateRange[0]),
            endTime: this.parseTime(this.dateRange[1]),
          });
        })
        .then((response) => {
          this.download(response.msg);
          this.exportLoading = false;
        })
        .catch(() => {});
    },
    // 查询
    search() {
      this.getAllList();
    },
    reset() {
      const end1 = new Date();
      const start1 = new Date();
      start1.setTime(start1.getTime() - 3600 * 1000 * 4);
      this.dateRange = [start1, end1];
      this.getAllList();
      // chart重画
      this.chartData = [];
      this.chartData2 = [];
      this.drawChart();
    },
    handleClickChange(row, event, column) {
      console.log(row.index, this.myChart, row, column, row.active);
      this.temprow = row.index;
      this.myChart.dispatchAction({
        type: "showTip",
        seriesIndex: 0,
        dataIndex: row.index,
      });
    },
    tableRowClassName({ row, rowIndex }) {
      console.log("tableRowClassName");
      //把每一行的索引放进row
      row.index = rowIndex;
      // if (row.active == true) {
      if (rowIndex == this.temprow) {
        return "light-row";
      }
    },
    goback() {
      // this.$router.go(-1);
      // this.page = 0;
      this.$parent.back();
    },
  },
};
</script>

<style scoped lang="scss">
.card-content1 {
  // height: 460px;
  // display: flex;
  .card-table {
    width: 75%;
    // height: 400px;
  }
  .card-left {
    width: 23%;
    .left-detail {
      height: 270px;
      font-size: 14px;
      width: 260px;
      padding: 20px 0px 10px 10px;
      // background-color: rgb(116, 75, 75);
      border: 1px solid #cacaca;
    }
  }
}
// title
.title {
  height: 40px;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: bold;
  padding: 4px 10px 20px 10px;
  .title-name {
    width: 80px;
  }
  .title-refresh {
    width: 70px;
    color: #1890ff;
    text-align: right;
    padding-right: 15px;
  }
}
.right-title {
  height: 40px;
  font-size: 14px;
  margin-left: 40px;
}

// el-form
::v-deep .el-form {
  height: 55px;
  padding: 10px;
  .el-form-item__label {
    font-size: 14px;
    font-weight: bold;
    color: black;
  }
}
// ::v-deep .el-input__inner {
//   width: 200px;
//   height: 28px;
//   font-size: 14px;
// // }
// .el-button {
//   height: 28px;
//   width: 64px;
//   font-size: 14px;
//   line-height: 5px;
// }
.red {
  color: red;
}
.green {
  color: green;
}
.card-box {
  padding: 0px;
  // margin-bottom: 20px;
}
// right-left
.card-left {
  width: 40%;
  min-height: 600px;
  // background-color: rgb(124, 66, 66);
}
.card-right {
  // width: 800px;
  width: 60%;
  height: 580px;
  // padding-left: 40px;
  // background-color: rgb(159, 216, 127);
  .title-name {
    margin-left: 20px;
    width: 80px;
    font-size: 14px;
    font-weight: bold;
  }
  .data-analyse {
    margin: 10px;
    height: 100px;
    width: 300px;
    .analyse-title {
      height: 50px;
      padding: 10px 10px 0px 10px;
      font-weight: bold;
      font-size: 14px;
    }
    .analyse-itemlist {
      height: 60px;
      width: 600px;
      margin-left: 50px;
      font-size: 14px;
      display: flex;
      flex-wrap: wrap;
    }
    .analyse-item {
      min-width: 300px;
      height: 30px;
      margin: 0px;
      padding: 0px;
    }
  }
}
.card-title {
  padding-left: 10px;
  margin: 6px 0px;
  font-size: 16px;
  font-weight: bold;
}

// table
::v-deep .el-table {
  // height: 460px;
  border: 0;
  padding-left: 10px;
  .el-table__header tr,
  .el-table__header th {
    height: 36px;
    color: black;
    font-size: 14px;
  }
  .el-table__body tr,
  .el-table__body td {
    height: 36px !important;
  }
  // 修改行高
  .cell {
    line-height: 20px;
  }
  .light-row {
    background: #f5f7fa;
  }
}
// 检测状态
.zc {
  height: 7px;
  width: 7px;
  border-radius: 50%;
  background-color: green;
  margin: auto 9px;
}
.yjbj {
  height: 7px;
  width: 7px;
  border-radius: 50%;
  background-color: #e19b16;
  margin: auto 9px;
}
.ejbj {
  height: 7px;
  width: 7px;
  border-radius: 50%;
  background-color: #e84b3f;
  margin: auto 9px;
}
.lx {
  height: 7px;
  width: 7px;
  border-radius: 50%;
  background-color: gray;
  margin: auto 9px;
}
.zc-t {
  color: green;
}
.yjbj-t {
  color: #e19b16;
}
.ejbj-t {
  color: #e84b3f;
}
.lx-t {
  color: gray;
}
.flexDiv {
  display: flex;
  justify-content: space-between;
}
</style>
